<template>
  <div class="report-container">
    <!-- 报表导航标签 -->
    <div class="report-tabs">
      <div 
        v-for="tab in reportTabs" 
        :key="tab.key"
        :class="['tab-item', { active: activeTab === tab.key }]"
        @click="switchTab(tab.key)"
      >
        {{ tab.label }}
      </div>
    </div>

    <!-- 通用筛选条件 -->
    <div class="filter-section">
      <div class="filter-row">
        <div class="filter-item">
          <label>类型:</label>
          <select v-model="filters.category" @change="loadReportData">
            <option value="">全部</option>
            <option value="营销">营销</option>
            <option value="记账">记账</option>
          </select>
        </div>
        
        <div class="filter-item">
          <label>库位:</label>
          <select v-model="filters.location" @change="loadReportData">
            <option value="">全部</option>
            <option value="仓库A">仓库A</option>
            <option value="仓库B">仓库B</option>
          </select>
        </div>
        
        <div class="filter-item">
          <label>商品:</label>
          <input 
            v-model="filters.product" 
            @input="loadReportData"
            placeholder="商品名称或编码"
            class="filter-input"
          />
        </div>
        
        <div class="filter-item">
          <label>日期:</label>
          <input 
            v-model="filters.startDate" 
            type="date" 
            @change="loadReportData"
            class="filter-input"
          />
          <span>至</span>
          <input 
            v-model="filters.endDate" 
            type="date" 
            @change="loadReportData"
            class="filter-input"
          />
        </div>
        
        <div class="filter-item">
          <label>单据选择:</label>
          <select v-model="filters.documentType" @change="loadReportData">
            <option value="">全部</option>
            <option value="商品">商品</option>
            <option value="尺码">尺码</option>
            <option value="颜色">颜色</option>
          </select>
        </div>
      </div>
      
      <div class="filter-actions">
        <button @click="searchReport" class="btn-primary">查询</button>
        <button @click="exportReport" class="btn-secondary">导出条件</button>
      </div>
    </div>

    <!-- 报表内容区域 -->
    <div class="report-content">
      <!-- 销售报表 -->
      <div v-if="activeTab === 'sales'" class="report-panel">
        <SalesReport :data="reportData.sales" :filters="filters" />
      </div>
      
      <!-- 分析报表 -->
      <div v-if="activeTab === 'analysis'" class="report-panel">
        <AnalysisReport :data="reportData.analysis" :filters="filters" />
      </div>
      
      <!-- 挖掘报表 -->
      <div v-if="activeTab === 'mining'" class="report-panel">
        <MiningReport :data="reportData.mining" :filters="filters" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import SalesReport from './components/SalesReport.vue'
import AnalysisReport from './components/AnalysisReport.vue'
import MiningReport from './components/MiningReport.vue'

// 报表标签配置
const reportTabs = ref([
  { key: 'sales', label: '营销报表' },
  { key: 'analysis', label: '分析报表' },
  { key: 'mining', label: '挖掘报表' }
])

// 当前激活的标签
const activeTab = ref('sales')

// 筛选条件
const filters = reactive({
  category: '',
  location: '',
  product: '',
  startDate: '2025-07-05',
  endDate: '2025-08-05',
  documentType: ''
})

// 报表数据
const reportData = ref({
  sales: [],
  analysis: [],
  mining: []
})

// 切换标签
const switchTab = (tabKey) => {
  activeTab.value = tabKey
  loadReportData()
}

// 加载报表数据
const loadReportData = async () => {
  try {
    // 这里应该调用实际的API接口
    // const response = await api.getReportData(activeTab.value, filters)
    
    // 模拟数据加载
    await new Promise(resolve => setTimeout(resolve, 500))
    
    if (activeTab.value === 'sales') {
      reportData.value.sales = generateSalesData()
    } else if (activeTab.value === 'analysis') {
      reportData.value.analysis = generateAnalysisData()
    } else if (activeTab.value === 'mining') {
      reportData.value.mining = generateMiningData()
    }
  } catch (error) {
    console.error('加载报表数据失败:', error)
  }
}

// 生成销售报表模拟数据
const generateSalesData = () => {
  return [
    { category: 'tt', code: '000107001070107', quantity: 11, sales: 0.00, cost: 0.00, profit: 0.00, margin: 0.00 },
    { category: '代销客户', code: '000107001070107', quantity: 12, sales: 0.00, cost: 0.00, profit: 0.00, margin: 0.00 },
    { category: '测试10连零售', code: '000106001060106', quantity: 11, sales: 0.00, cost: 0.00, profit: 0.00, margin: 0.00 },
    { category: '测试20店', code: '000108001080108', quantity: 22, sales: 0.00, cost: 0.00, profit: 0.00, margin: 0.00 },
    { category: '测试商店', code: '000110001100110', quantity: 12, sales: 0.00, cost: 0.00, profit: 0.00, margin: 0.00 },
    { category: '测试老付代销店', code: '000106001060106', quantity: 11, sales: 0.00, cost: 0.00, profit: 0.00, margin: 0.00 },
    { category: '直营1店', code: '000106001060106', quantity: 1, sales: 0.00, cost: 0.00, profit: 0.00, margin: 0.00 },
    { category: '', code: '000107001070107', quantity: 2, sales: 0.00, cost: 0.00, profit: 0.00, margin: 0.00 },
    { category: '', code: '000109001090109', quantity: 1, sales: 0.00, cost: 0.00, profit: 0.00, margin: 0.00 },
    { category: '', code: '000110001100110', quantity: -5, sales: 0.00, cost: 0.00, profit: 0.00, margin: 0.00 },
    { category: '', code: '', quantity: -8, sales: -1600.00, cost: -1440.00, profit: 0.00, margin: 0.00 }
  ]
}

// 生成分析报表模拟数据
const generateAnalysisData = () => {
  return [
    { period: '2025-07', totalSales: 125000, totalOrders: 1250, avgOrderValue: 100, topCategory: '服装' },
    { period: '2025-08', totalSales: 138000, totalOrders: 1380, avgOrderValue: 100, topCategory: '电子产品' }
  ]
}

// 生成挖掘报表模拟数据
const generateMiningData = () => {
  return [
    { insight: '周末销售额比工作日高30%', recommendation: '增加周末库存' },
    { insight: '下午2-4点是销售低峰', recommendation: '可安排员工休息或培训' }
  ]
}

// 查询报表
const searchReport = () => {
  loadReportData()
}

// 导出报表
const exportReport = () => {
  // 实现导出功能
  const dataToExport = reportData.value[activeTab.value]
  console.log('导出数据:', dataToExport)
  alert('报表导出功能开发中...')
}

// 初始化
onMounted(() => {
  loadReportData()
})
</script>

<style scoped>
.report-container {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.report-tabs {
  display: flex;
  background: white;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tab-item {
  padding: 15px 30px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  font-weight: 500;
}

.tab-item:hover {
  background: #f8f9fa;
}

.tab-item.active {
  color: #1890ff;
  border-bottom-color: #1890ff;
  background: #f0f8ff;
}

.filter-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-item label {
  font-weight: 500;
  color: #333;
  white-space: nowrap;
}

.filter-input, select {
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

.filter-input:focus, select:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.filter-actions {
  display: flex;
  gap: 12px;
}

.btn-primary, .btn-secondary {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-primary {
  background: #1890ff;
  color: white;
}

.btn-primary:hover {
  background: #40a9ff;
}

.btn-secondary {
  background: #f5f5f5;
  color: #333;
  border: 1px solid #d9d9d9;
}

.btn-secondary:hover {
  background: #e6f7ff;
  border-color: #1890ff;
}

.report-content {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.report-panel {
  padding: 20px;
}
</style>